<template>
  <div class="header">
    <div class="font-20 header-container clearfix">
      <nuxt-link tag="h3" class="title" :to="{name: 'page'}">青浦区练塘镇集体资产(建筑物)管理系统</nuxt-link>
      <p class="info">
        欢迎您，{{username}}<span @click="editmm=true" class="quit">修改密码</span><span @click="userQuit" class="quit">退出</span>
      </p>

    </div>
    <el-dialog title="修改密码" :visible.sync="editmm" width="40%" :appendToBody="true">
      <el-form labelWidth="140px" :rules="rules" :model="form1" ref="form1">
        <el-form-item label="旧密码" prop="pw1">
          <el-input v-model="form1.pw1"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pw2">
          <el-input v-model="form1.pw2" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pw3">
          <el-input v-model="form1.pw3" clearable></el-input>
        </el-form-item>
        <el-form-item label="提示：">
          密码必须由字母和数字组合，且不得小于6位数
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editmm = false">取 消</el-button>
        <el-button type="primary" @click="savemm(form1)">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
export default {

  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.form1.pw3 !== '') {
          this.$refs.form1.validateField('pw3');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.form1.pw2) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ts: this.newStore(),
      username: localStorage.getItem('username'),
      editmm: false,
      form1: {
        pw1: '',
        pw2: '',
        pw3: '',
      },
      rules: {
        pw1: [{
          required: true, // 是否必填
          message: '不能为空', // 规则
          trigger: 'blur', // 何事件触发
        }],
        pw2: [{
          validator: validatePass,
          trigger: 'blur',
          required: true,
        }],
        pw3: [{
          validator: validatePass2,
          trigger: 'blur',
          required: true,
        }],
      },
    };
  },
  methods: {
    savemm() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          const req = {
            handle: '67A5B6FEF17D97DEE5FB3EC2509558B25620A160BEDC8633D95846E0D00AB8ECBFF0B9210751F692',
            oldpasswords: this.form1.pw1,
            passwords: this.form1.pw2,
          };
          this.$confirm('确定修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              localStorage.removeItem('token');
              localStorage.removeItem('username');
              this.$message({
                type: 'success',
                message: '修改成功,请重新登陆',
              });
              this.$router.push('/login');
              this.editmm = false;
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('两次输入密码不一致！');
          return false;
        }
      });
    },
    userQuit() {
      this.$confirm('确认退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        localStorage.removeItem('token');

        this.$message({
          type: 'success',
          message: '已退出',
        });
        this.$router.push('/login');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .quit
    font-size: 18px;
    margin-left: 5px;
    padding: 7px 13px;
    &:hover
      background #f1f1f180
      border-radius: 5px
      color #fff
  .header
    width: 100%
    height: 60px
    background: #6699FF
    .header-container
      position: relative
      margin: 0 10%
      padding-top: 20px
      color: #fff
      cursor: pointer
      h3
        float: left
      .info
        float: right
</style>
